<script setup lang="ts">
import { UserFilled, ArrowDown  } from '@element-plus/icons-vue'
import Logo from '@/assets/logo.png'
import { ref } from "vue"
import { useAuthStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()
const AuthStore = useAuthStore()

import { useUserStore} from "@/stores";

const userStore = useUserStore()

const Logout = () => {
  AuthStore.removeToken()
  AuthStore.removeAudioToken()
  router.push("/login")

}

const handleError = (event: any) => {
  event.target.src = Logo
  event.target.onerror = null
}

const handleLogOut = () => {
  Logout()
}

</script>

<template>
  <div class="header-user">
    <el-avatar :icon="userStore.Avatar ? '' : UserFilled" size="small" >
      <img :src="userStore.Avatar ? userStore.Avatar : ''" :alt="userStore.userName" @error="handleError($event)" class="userHeaderImg" />
    </el-avatar>
    <span>{{ userStore.userName }}</span>
    <el-icon><el-popconfirm
        title="退出登录吗？"
        confirm-button-text="确认"
        cancel-button-text="不了"
        @confirm="handleLogOut"
        >
      <template #reference>
        <ArrowDown />
      </template>
    </el-popconfirm></el-icon>
  </div>
</template>

<style lang="scss" scoped>
.header-user {
  display: flex;
  align-items: center;
  span {
    margin-left: 6px;
    font-size: 12px;
    vertical-align: middle;
  }

  .el-icon{
    margin-left: 14px;
  }

  .userHeaderImg{
    object-fit: cover;
    object-position: center;
  }
}

</style>